<template>
    <view class="main">
        <view class="tab" :style="{ backgroundColor: tabBackColor }">
            <tn-tabs v-model="currentTabIndex" :bg-color="tabBackColor" :bottom-shadow="false" active-color="#000"
                active-font-size="40" :bar="false">
                <tn-tabs-item @click="changeTab(item)" v-for="(item, index) in tabsData" :key="index"
                    :title="item.text" />
            </tn-tabs>
        </view>
        <view class="list" :style="{ marginTop: tabNavheight + 'px' }">
            <!--  @click.stop="navTo(`/subPackage/community/communityDetail?id=${index}`)" -->
            <view class="item" v-for="(item, index) in commentListData" :key="item.id"
                @click.stop="navTo(`/subPackage/community/communityDetail?id=${item.bbs_id}&is_care=${item.is_care}`)">
                <view class="user dispaly-center"
                    @click.stop="navTo(`/subPackage/community/userDetail?id=${item.user_id}&is_care=${item.is_care}`)">
                    <view class="avatar">
                        <image mode="aspectFill" :src="item.avatar" />
                    </view>
                    <view class="name">{{ item.nickname }}</view>
                </view>
                <view class="con">{{ item.content }}</view>
                <view class="img-list dispaly-center" v-if="item.image.length">
                    <image mode="aspectFill" :src="img" v-for="(img, imgIndex) in item.image" :key="img"
                        @click.stop="preview(item.image, imgIndex)" />
                </view>
                <view class="more">
                    <!-- <view class="one dispaly-center" v-if="item % 2 == 0">
                        <view class="left-img">
                            <image src="/static/test.jpg" />
                        </view>
                        <view class="right-con">
                            <view class="top dispaly-center">
                                <view class="name">中国邮电器材集团北京分公司</view>
                                <view class="tip">央企</view>
                            </view>
                            <view class="bottom">纪监督岗</view>
                        </view>
                    </view> -->
                    <view class="two">{{ item.title }}</view>
                </view>
            </view>
            <LoadMore :status="status" :show="loadShow" />
        </view>
    </view>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/util';
import type { TabDataType } from '@/types/more'
import { ref, onMounted, reactive } from 'vue';
import { getElementHeight } from '@/utils/util'
import { onPageScroll, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { getMyComment } from '@/api/home/home'
import type { RequestMyCommentType } from '@/types/requstParm'
import type { CommentListType } from '@/types/responseData'

const currentTabIndex = ref<number>(0)
const tabsData = ref<Array<TabDataType>>([
    {
        text: '我评论别人',
        type: 1
    },
    {
        text: '别人评论我',
        type: 2
    }
])

let queryData = reactive<RequestMyCommentType>({
    user_id: 2,
    type: 1,
    page: 1,
    limit: 10,
})

const status = ref<string>('loadmore')
const loadShow = ref<boolean>(false)
let commentListData = ref<Array<CommentListType>>([])
const getListData = async () => {
    status.value = 'loading'
    const res = await getMyComment(queryData)
    if (res.code == 0) {
        if (res.data.list.length) {
            status.value = 'loadmore'
            loadShow.value = true
            commentListData.value = [...commentListData.value, ...res.data.list]
        } else {
            loadShow.value = true
            status.value = 'nomore'
        }
    }
}

// 切换tab
let type = ref<number>(1)
const changeTab = (item: TabDataType) => {
    type.value = item.type
    init()
    queryData.type = item.type
    getListData()
}

const init = () => {
    commentListData.value = []
    queryData.page = 1
}

onReachBottom(() => {
    (queryData.page as number)++
    getListData()
})

onPullDownRefresh(async () => {
    uni.showLoading()
    init()
    await getListData()
    uni.stopPullDownRefresh()
    uni.hideLoading()
})


// 预览图片
const preview = (imgs: string[], index: number) => {
    uni.previewImage({
        urls: imgs,
        current: index
    })
}

// 获取tab高度
const tabNavheight = ref<number | unknown>(0)
onMounted(async () => {
    getListData()
    const height = await getElementHeight('.tab')
    tabNavheight.value = height
})

// tab背景色
const tabBackColor = ref<string>('transparent')
onPageScroll((res) => {
    if (res.scrollTop > (tabNavheight.value as number)) {
        tabBackColor.value = '#fff'
    } else {
        tabBackColor.value = 'transparent'
    }
})
</script>
<style lang="scss" scoped>
.main {
    .tab {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding-bottom: 20rpx;
        z-index: 999;
    }

    .list {
        padding: 22rpx 30rpx;

        .item:last-child {
            margin-bottom: 0;
        }

        .item {
            background: #FFFFFF;
            border-radius: 20rpx;
            padding: 25rpx;
            margin-bottom: 20rpx;

            .user {
                .avatar {
                    margin-right: 10rpx;

                    image {
                        width: 57rpx;
                        height: 57rpx;
                        border-radius: 50%;
                    }
                }

                .name {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #000000;
                }
            }

            .con {
                margin: 14rpx 0 25rpx 0;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 26rpx;
                color: #7E7E7E;
            }

            .img-list {
                flex-wrap: wrap;

                image {
                    width: 196rpx;
                    height: 192rpx;
                    border-radius: 15rpx;
                    margin-right: 19rpx;
                    margin-bottom: 19rpx;
                }
            }

            .more {
                padding: 20rpx;
                background: #F6F6F6;
                border-radius: 20rpx;

                .one {
                    .left-img {
                        margin-right: 20rpx;

                        image {
                            width: 81rpx;
                            height: 81rpx;
                            border-radius: 10rpx;
                        }
                    }

                    .right-con {
                        .top {
                            .name {
                                font-family: PingFang SC, PingFang SC;
                                font-weight: bold;
                                font-size: 26rpx;
                                color: #000000;
                                margin-right: 10rpx
                            }

                            .tip {
                                font-family: PingFang SC, PingFang SC;
                                font-weight: 400;
                                font-size: 24rpx;
                                color: #A4A4A4;
                                border-radius: 6rpx;
                                border: 1rpx solid #B8B8B8;
                                padding: 4rpx 8rpx;
                            }
                        }

                        .bottom {
                            margin-top: 10rpx;
                            font-family: PingFang SC, PingFang SC;
                            font-weight: 400;
                            font-size: 22rpx;
                            color: #7E7E7E;
                        }
                    }
                }

                .two {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #000000;
                    line-height: 40rpx;
                }
            }
        }
    }
}
</style>